<%--
  Created by IntelliJ IDEA.
  User: Dell
  Date: 2018/12/11
  Time: 19:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>表内容</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="generator" content="HBuilder">

    <%--css--%>
    <link rel="stylesheet" href="http://cdn.bossanova.uk/css/jquery.jexcel.css" type="text/css" />
    <link rel="stylesheet" href="../css/bootstrap.css"/>
    <%--js--%>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdn.bossanova.uk/js/jquery.jexcel.js"></script>
    <script src="../js/bootstrap.js"></script>
    <%--<script src="http://cdn.bossanova.uk/js/jquery.jexcel.js"></script>--%>
</head>
<body>
<header>
    <div style="margin-top:15px; height: 40px">
        <div style="margin-left: 8px">
            <button id='downloads' type="button" class="btn-default">下载全部</button>
            <a href="#" id="btn1">首页</a>
            <a href="#" id="btn2">上一页</a>
            <span id="page_num">*</span>
            <a href="#" id="btn3">下一页</a>
            <a href="#" id="btn4">尾页</a>
        </div>
    </div>
</header>

<div id="select_result"></div>

<!-- js-->
<%--table generate--%>
<script type="text/javascript">


    var table_data = "${table_data}";
    var table_title = "${table_title}";

    console.log(table_data);

    //分组
    var table_data_part = table_data.split("wlcniubi");
    var data_length = table_data_part.length;                                //row_num
    var page_num = Math.ceil(data_length/25);        //总组数(页数)

    var page = 1;   //当前页（25)


    $("#page_num").text("第 "+ page +"/"+ page_num +" 页");


    for(var i = 0; i < data_length; i++) {
        table_data_part[i] = table_data_part[i].split("lxyniubi");          //全局以按“lxyniubi”分割->table_data_part->[null,null,null,……,,,,,,]
    }

    var result = [];
    for(var j = 0; j < data_length; j += 25) {
        result.push(table_data_part.slice(j, j+25));
    }
    var table_title_list = table_title.split("wlcniubi");


    //Header
    $('#select_result').jexcel({
        data: [],
        csvHeaders:true,
        colHeaders: table_title_list
    });


    function set_page() {
        $("#page_num").text("第 "+ page +"/"+ page_num +" 页");
    }

    // 分页（伪）
    //first
    $("#btn1").click(function () {
        page = 1;
        set_table_content("select_result",result[page-1]);
        set_page();
    });
    //pre
    $("#btn2").click(function () {
        if(page !== 1) {
            page--;
            set_table_content("select_result",result[page-1]);
            set_page();
        }
        else {
            alert("第一页");
        }
    });
    //next
    $("#btn3").click(function () {
        if(page !== page_num) {
            page++;
            set_table_content("select_result",result[page-1]);
            set_page();
        }
        else {
            alert("最后一页");
        }
    });
    //last
    $("#btn4").click(function () {
        page = page_num;
        set_table_content("select_result",result[page-1]);
        set_page();
    });

    set_table_content("select_result",result[page-1]);

    //download
    $('#downloads').on('click', function () {

        var data =  "\ufeff";         //加BOM头表示utf-8
        var title_list =  table_title_list;
        data += title_list.join() + "\n";

        var pom = document.createElement('a');

        var temp = [];
        for(var i = 0; i < data_length; i++) {

            temp = table_data_part[i];
            var temp_len = temp.length-1;
            for(var j = 0; j < temp_len; j++) {
                data += "\"" + temp[j] + "\"" + "\t,";
            }
            data += "\"" + temp[temp_len] + "\"" + "\t" + "\n";
        }

        var blob = new Blob([data], {type: 'text/csv;charset=utf-8'});
        pom.href=URL.createObjectURL(blob);
        pom.setAttribute("download", getDate() + "DATA.csv");
        pom.click();
    });

    //date
    function getDate(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        return year + "" + month + "" + strDate;
    }


    <%--table download--%>

    <%--table operator--%>
    function add_table_row(table_id,col_num) {
        var tbody = document.getElementById(table_id).children[0].children[1];
        var tr = document.createElement("tr");
        var row_index = tbody.children.length;

        var td = document.createElement("td");
        td.id = "row-"+row_index;
        td.className = "jexcel_label";
        td.innerHTML = row_index+1;

        tr.appendChild(td);

        for (var i=0;i<col_num;i++){
            td = document.createElement("td");
            td.id = i+"-"+row_index;
//            td.width = wid_arr[i];
            td.align = "center";
            tr.appendChild(td)
        }
        tbody.appendChild(tr);
    }

    function set_table_content(table_id,content) {

        var table = document.getElementById(table_id).children[0];   //table
        var total_rows = content.length;

        $("tbody").find("tr").remove();

        var col_num = table.children[0].children[0].children.length-1;
        for (var i = 0; i < total_rows;i++){
            add_table_row(table_id,col_num);
        }
        for (i = 0; i < 25;i++){                               //先画表格，再填数据
            if(content[i] === undefined) return;
            for (var j = 0; j<content[i].length;j++){
                table.children[1].children[i].children[j+1].innerHTML = content[i][j] + "\t";
            }
        }
    }

</script>
<!-- /js-->
</body>

</html>
